<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{ background: #111; }

        .fire{ width:10px; height:10px; position: fixed; bottom:0; background: red;}

        .small_fire{ width:10px; height:10px; background: green; border-radius: 50%; position: fixed;}
    </style>
</head>
<body>

</body>
<script src="../move.js"></script>
<script>

    function Fire(ops){
        this.ops = ops;
        this.createEle();
    }
    Fire.prototype.createEle = function(){
        this.ele = document.createElement("div");
        // 两个烟花的class不同
        this.ele.className = this.ops.type ? "small_fire" : "fire";
        this.ele.style.background = randomColor();
        // 两个烟花都需要设置left和top
        this.ele.style.left = this.ops.start.x + "px";
        this.ele.style.top = this.ops.start.y + "px";
        document.body.appendChild(this.ele);
        this.action();
    }
    Fire.prototype.action = function(){
        // 两个烟花的运动终点都需要设置left和top
        move( this.ele, {
            top: this.ops.target.y,
            left: this.ops.target.x
        }, ()=>{
            this.ele.remove();
            // 区分当前是主体烟花还是小烟花
            if(this.ops.type === 0){
                for(let i=0;i<10;i++){
                    new Fire({
                        start:{
                            x: this.ops.target.x,
                            y: this.ops.target.y
                        },
                        target:{
                            x: random(0, clientW-10),
                            y: random(0, clientH-10)
                        },
                        type:1
                    });
                }
            }
        } )
    }

    const clientH = document.documentElement.clientHeight;
    const clientW = document.documentElement.clientWidth;

    document.onclick = function(eve){
        // new Fire的参数：一个对象
            // 对象内的属性：
                // target：对象类型，内含x和y属性，表示运动目标的坐标
                // start：对象类型内含x和y属性，表示初始位置的坐标
                // type：数值，0为主体烟花，1为小烟花
        new Fire({
            target:{
                x:eve.clientX,
                y:eve.clientY,
            },
            start:{
                x: eve.clientX,
                y: clientH
            },
            type:0
        });
    }

    function random(max,min){
        return Math.round(Math.random()*(max-min)+min)
    }
    function randomColor(){
        return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
    }

</script>
</html>